<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-container>
          <el-header>
            <el-form ref="fm" :model="webPage">
              <span class="headfont">关键字：</span>
            <!-- 搜索框 -->
            <el-input
              placeholder="根据编号搜索"
              v-model="input"
              clearable
              class="inline-input"
            >
              <!-- 记录总条数 -->
            </el-input>
            <!-- 清除按钮 -->
            <el-button
              type="primary"
              class="el-button el-button--default el-button--small btn"
              @click="removeInput"
              >清除</el-button
            >
            <!-- 搜索按钮 -->
            <el-button
              class="el-button el-button--primary el-button--small btn"
              style="background: #fff; color: #606266"
              @click="serch"
              >搜索</el-button
            >
            </el-form>
          </el-header>
          <!-- 中间黑色统计数据 -->
         <el-alert :title="'数据一共' + total + '条'" type="info" :closable="false" show-icon></el-alert>
          <!-- 表格内容 -->
          <template>
            <el-table :data="list" style="width: 100%">
              <el-table-column prop="id" label="编号" width="230">
              </el-table-column>
              <el-table-column prop="questionType" label="题型" width="80">
                <template #default="{ row }">
                  {{ questionTypeFn(row.questionType) }}
                </template>
              </el-table-column>
              <el-table-column prop="questionIDs" label="题目编号" width="250">
                <template slot-scope="scope">
                  <a
                    href="#"
                    style="color: rgb(0, 153, 255); display: block"
                    v-for="(item, index) in scope.row.questionIDs" :key="index"
                    @click="openList(item.id)"
                    >{{ item.number }}</a
                  >
                </template>
              </el-table-column>
              <el-table-column prop="addTime" label="录入时间" width="180">
              </el-table-column>
              <el-table-column prop="totalSeconds" label="答题时间(s)">
              </el-table-column>
              <el-table-column prop="accuracyRate" label="正确率">
              </el-table-column>
              <el-table-column prop="userName" label="录入人">
              </el-table-column>
              <!-- 删除图标 -->
              <el-table-column label="操作">
                <template #default="{ row }">
                  <i class="el-icon-delete" @click="delList(row)"></i>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <!-- 底部切换分页 -->
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height: 60px"
          >
            <el-pagination
              @size-change="sizeChange"
              @current-change="changePage"
              :current-page="webPage.page"
              layout=" sizes, prev, pager, next, jumper"
              :page-sizes="[20, 10, 5]"
              :page-size="webPage.pagesize"
              :total="total"
            >
            </el-pagination>
          </el-row>
        </el-container>
        <addPreview :show="show" @close="show = false" :data="data"/>
      </el-card>
    </div>
  </div>
</template>

<script>

// 导入弹层组件
import addPreview from './components/addPreview'
// 导入获取题库列表 | 删除组题 | 弹层需要(基础题库详情)接口
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
// 导入数据字典(更改题型)
import { questionType } from '@/api/hmmm/constants.js'

export default {
  components: {
    addPreview
  },
  data () {
    return {
      // 控制弹层显隐
      show: false,
      // 输入框内容
      input: '',
      // 获取到的组题数据
      list: [],
      // 存储题目编号
      titleNumber: [],
      // 分页数据
      webPage: {
        page: 1, // 当前页面
        pagesize: 5 // 每页条数
      },
      total: 0, // 总数
      questionType,
      newList: [],
      // 弹层数据
      data: {}
    }
  },
  created () {
    this.getlist()
  //   this.serch()
  },
  methods: {
    // 搜索功能实现
    async serch () {
      // 输入框内容
      // console.log(this.input)
      // 判断内容是否为空
      if (this.input === '') {
        return this.$message.error('请输入内容')
      } else {
        const res = await randoms()
        res.data.pagesize = 1000
        const data = res.data.items.filter(item => {
          return item.id.includes(this.input)
        })
        res.data.pagesize = this.webPage.pagesize
        this.total = data.length
        this.list = data
      }
    },
    // async serch () {
    //   console.log('传入的参数', { ...this.webPage, id: this.input })
    //   const res = await randoms({ ...this.webPage, id: this.input })
    //   this.list = res.data.items
    //   console.log('返回的参数', res)
    // },
    // 实现清除功能
    removeInput () {
      this.input = ''
      this.getlist()
    },
    // ==获取组题数据列表==
    async getlist () {
      const { data } = await randoms(this.webPage)
      console.log('获取到的组题数据', data)
      this.$nextTick(() => {
        this.total = data.counts
      })
      this.list = data.items
    },
    // ==分页组件==
    // 每页/条
    sizeChange (val) {
      this.webPage.pagesize = val
      // console.log(val)
      this.getlist()
    },
    // 当前/条
    changePage (val) {
      // console.log(`当前页: ${val}`)
      this.webPage.page = val
      this.getlist()
    },
    // ==格式化题型==
    // type 1代表单选 2代表多选 3代表简答
    questionTypeFn (type) {
      // console.log(this.questionType, type)
      const map = {}
      this.questionType.forEach((item) => {
        map[item.value] = item.label
      })
      return map[type]
    },
    // ==删除组题==
    delList (id) {
      this.$confirm('是否确认操作', '提示').then(async () => {
        // const newId = id.substring(1)
        // console.log(newId)
        await removeRandoms(id)
        this.$message.success('删除成功')
        this.$nextTick(() => {
          this.getlist()
        })
      }).catch(() => {

      })
    },
    // ==打开弹层==
    async openList (id) {
      const { data } = await detail({ id: id })
      if (data.id === id) {
        // 把获取到的基础题库的详情存储到data里
        this.data = data
        // 弹层显隐
        this.show = true
        console.log(this.data)
      } else {
        this.$message.error('该题目不存在，请尝试查看其它')
      }
    }

  }
}
</script>

<style scoped>
.headfont {
  vertical-align: middle;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
}
::v-deep .inline-input {
  width: 250px;
  padding: 0, 15px;
}
.btn {
  float: right;
  margin-left: 10px;
}
/* 删除图标颜色 */
.el-icon-delete {
  width: 30px;
  height: 30px;
  color: #f56c6c;
  line-height: 30px;
  text-align: center;
}
.el-icon-delete:hover {
  border-radius: 100%;
  background-color: black;
  background: #fef0f0;
  border: 1px solid #f56c6c;
}
.el-row {
  margin-bottom: 20px;
}
.el-row :last-child {
  margin-bottom: 0;
}
</style>
